<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ol {
            list-style: none;
        }

        li {
            width: 10px;
            height: 10px;
            /* border: 1px solid; */
            border-radius: 50%;
            position: absolute;

        }
    </style>
</head>

<body>


    <ol></ol>
    <script>
        //引用

        let ol = document.querySelector('ol')
        console.log(innerWidth, innerHeight);
        document.onmousedown = function () {
            document.onmousemove = function (event) {
                let i = 0;
                let li = document.createElement('li');
                i++;
                let x = event.clientX;
                let y = event.clientY;
                let r = random(255)
                let g = random(150,255)
                let b = random(200,255)
                console.log(x, y);
                let z = random(5, 20);
                let iner = 0.9;
                let timer = setInterval(function () {
                    z++;
                    iner -= 0.005
                    ol.appendChild(li);
                    li.style.cssText = `
                            width: ${z}px;
                            height: ${z}px;
                            left:${x-z/2}px;
                            top:${y-z/2}px;
                            background-color: rgb(${r},${g},${b},${iner});
                            box-shadow: 3px 3px  10px rgba(${r},${g},${b},${iner});
                                    `
                    if (z > 150) {
                        ol.removeChild(li);
                        clearInterval(timer);
                        timer = null;
                    }
                }, 20);
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            }
        }








        function random(min, max) {
            if (!max) {
                [max, min] = [min, 0];
            }
            let number = parseInt(Math.random(min, max) * (max - min + 1) + min);
            return number;
        }
    </script>
</body>

</html>